<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!-- 东区总开1 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border p10 d-flex flex-column justify-content-between">
          <div class="height-25 mb-1 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-14">东区总开1</div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="mr-4">
                <el-image class="img_size_29"
                          :src="(switchStatusOne.socketColor=='1')?require('@/assets/img/dlq_open.png'):require('@/assets/img/dlq_close.png')"
                          fit="cover"></el-image>
              </div>
              <div>
                <el-image class="img_size_29"
                          :src="switchStatusOneBgImg[switchStatusOne.socketColor2]"
                          fit="cover"></el-image>
              </div>
            </div>
          </div>
          <div class="height-25 mb-2 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-warning-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_A" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataOne0.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-warning-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_A" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataOne3.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
          <div class="height-25 mb-2 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-success-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_B" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataOne1.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-success-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_B" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataOne4.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
          <div class="height-25 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-danger-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_C" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataOne2.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-danger-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_C" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataOne5.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 东区总开2   -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border p10 d-flex flex-column justify-content-between">
          <div class="height-25 mb-1 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-14">东区总开2</div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="mr-4">
                <el-image class="img_size_29"
                          :src="(switchStatusTwo.socketColor=='1')?require('@/assets/img/dlq_open.png'):require('@/assets/img/dlq_close.png')"
                          fit="cover"></el-image>
              </div>
              <div>
                <el-image class="img_size_29"
                          :src="switchStatusOneBgImg[switchStatusTwo.socketColor2]"
                          fit="cover"></el-image>
              </div>
            </div>
          </div>
          <div class="height-25 mb-2 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-warning-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_A" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataTwo0.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-warning-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_A" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataTwo3.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
          <div class="height-25 mb-2 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-success-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_B" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataTwo1.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-success-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_B" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataTwo4.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
          <div class="height-25 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-danger-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_C" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataTwo2.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-danger-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_C" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataTwo5.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 西区总开 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border p10 d-flex flex-column justify-content-between">
          <div class="height-25 mb-1 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-14">西区总开</div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <div class="mr-4">
                <el-image class="img_size_29"
                          :src="(switchStatusThree.socketColor=='1')?require('@/assets/img/dlq_open.png'):require('@/assets/img/dlq_close.png')"
                          fit="cover"></el-image>
              </div>
              <div>
                <el-image class="img_size_29"
                          :src="switchStatusOneBgImg[switchStatusThree.socketColor2]"
                          fit="cover"></el-image>
              </div>
            </div>
          </div>
          <div class="height-25 mb-2 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-warning-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_A" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataThree0.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-warning-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_A" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataThree3.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
          <div class="height-25 mb-2 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-success-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_B" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataThree1.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-success-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_B" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataThree4.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
          <div class="height-25 d-flex-center-jb">
            <div class="h-100 w-50 mr-2 border-danger-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_C" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataThree2.deviceValue}}</div>
                  <div class="content_unit font-12">V</div>
                </div>
              </div>
            </div>
            <div class="h-100 w-50 border-danger-top">
              <div class="h-100 w-100 d-flex align-items-center pl-2 pr-2">
                <div class="d-flex-center mr-1">
                  <el-image class="img_size_31" :src="icon_C" fit="cover"></el-image>
                </div>
                <div class="d-flex align-items-end justify-content-center">
                  <div class="content_value font-24 mr-1">{{switchDataThree5.deviceValue}}</div>
                  <div class="content_unit font-12">A</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 公共区域 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="font-white common_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">公共区域</div>
            </div>
          </div>
          <div class="common_content font-white d-flex-center-jb flex-wrap">
            <div class="width-33 h-50 pt-3 pl-2 pr-2" v-for="(item,index) in twoCardData" :key="index">
              <div class="w-100 h-100 d-flex common_content_radius">
                <div class="common_content_title d-flex-center" :class="twoCardBg[index]">
                  <div class="d-flex-center">
                    <el-image v-if="index==3" class="img_size_44" :src="yjgyd_44" fit="cover"></el-image>
                    <el-image v-else-if="index==4" class="img_size_44" :src="ysj_44" fit="cover"></el-image>
                    <el-image v-else-if="index==5" class="img_size_44" :src="xyj_44" fit="cover"></el-image>
                    <el-image v-else class="img_size_44" :src="dp_44"
                              fit="cover"></el-image>
                  </div>
                </div>
                <div class="common_content_container pr-3 pl-2 pt-2 pb-2">
                  <div class="w-100 h-100 d-flex justify-content-between">
                    <div class="d-flex flex-column justify-content-between width-80">
                      <div>{{twoCardTitle[index]}}</div>
                      <div class="d-flex align-items-end justify-content-center">
                        <div class="content_value font-30 mr-1 text-center">{{item.deviceValue}}</div>
                        <div class="content_unit font-12">A</div>
                      </div>
                    </div>
                    <div class="d-flex-center-jb2 h-100">
                      <div class="d-flex-center">
                        <el-image class="img_size_29"
                                  :src="(twoCardStatus[index].socketColor=='1')?require('@/assets/img/dlq_open.png'):require('@/assets/img/dlq_close.png')"
                                  fit="cover"></el-image>
                      </div>
                      <div class="d-flex-center">
                        <el-image class="img_size_29"
                                  :src="switchStatusOneBgImg[twoCardStatus[index].socketColor2]"
                                  fit="cover"></el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 房间照明 -->
      <div class="h-100 w-1 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="">房间照明</div>
            </div>
          </div>
          <div class="d-flex flex-column justify-content-between item_content">
            <div class="height-25 mb-3 clearLastMb" v-for="(item,index) in threeCardData" :key="index">
              <div class="h-100 w-100 p10" :class="threeCardStatus[index]">
                <div class="height-40">
                  <div class="content_title font-12">{{threeCardTitle[index]}}</div>
                </div>
                <div class="height-60">
                  <div class="d-flex align-items-end justify-content-center">
                    <div class="content_value font-28 mr-1">{{item.deviceValue}}</div>
                    <div class="content_unit font-12">A</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 房间空调 -->
      <div class="h-100 w-4 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="">房间空调</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex flex-wrap justify-content-between">
              <div class="height-20 width-30 mb-3 clearLastMb2" v-for="(item, index) in fourCardData" :key="index">
                <div class="h-100 w-100 p10" :class="fourCardStatus[index]">
                  <div class="height-40">
                    <div class="content_title font-12">{{fourCardTitle[index]}}</div>
                  </div>
                  <div class="height-60">
                    <div class="d-flex align-items-end justify-content-center">
                      <div class="content_value font-28 mr-1">{{item.deviceValue}}</div>
                      <div class="content_unit font-12">A</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 房间插座 -->
      <div class="h-100 w-4 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="">房间插座</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex flex-wrap justify-content-between">
              <div class="height-20 width-30 mb-3 clearLastMb2" v-for="(item, index) in fiveCardData" :key="index">
                <div class="h-100 w-100 p10" :class="fiveCardStatus[index]">
                  <div class="height-40">
                    <div class="content_title font-12">{{fourCardTitle[index]}}</div>
                  </div>
                  <div class="height-60">
                    <div class="d-flex align-items-end justify-content-center">
                      <div class="content_value font-28 mr-1">{{item.deviceValue}}</div>
                      <div class="content_unit font-12">A</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼1层 故障记录 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="">1号楼1层 故障记录</div>
            </div>
          </div>
          <div class="d-flex flex-column item_content font-white font-12">
            <div v-show="deviceGz.length==0" class="w-100 h-100">
              <div class="w-100 h-100 d-flex flex-column justify-content-between">
                <div class="h-50">
                  <el-image class="w-100 h-100" :src="jlt" fit="contain"></el-image>
                </div>
                <div class="height-47">
                  <div class="h-100 w-100 border-success-top d-flex flex-column justify-content-between p-3">
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>洗衣机</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>空调</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>照明</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>应急灯</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>总开关</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="deviceGz.length>0" class="h-100 w-100">
              <div v-if="deviceGzObj.deviceName" class="height-30 mb-3 clearLastMb border-danger">
                <div class="h-2 bg_danger d-flex align-items-center justify-content-between pl-3 pr-3">
                  <div class="font-20">{{deviceGzObj.faultReason}}</div>
                  <div class="">{{deviceGzObj.faultTime}}</div>
                </div>
                <div class="h-4 w-100 mb-3 d-flex flex-column justify-content-around pl-3 pr-3 pt-1 pb-1">
                  <div class="d-flex-center-jb">
                    <div class="d-flex align-items-center">
                      <div>设备名称：</div>
                    </div>
                    <div>{{deviceGzObj.deviceName}}</div>
                  </div>
                  <div class="d-flex-center-jb">
                    <div class="d-flex align-items-center">
                      <div>设备位置：</div>
                    </div>
                    <div>{{deviceGzObj.deviceLocation}}</div>
                  </div>
                </div>
              </div>
              <div class="height-67 w-100 over-auto-y" ref="table_one">
                <div class="height-48 mb-3 clearLastMb border-danger" v-for="(item,index) in deviceGz" :key="index">
                  <div class="h-2 bg_danger d-flex align-items-center justify-content-between pl-3 pr-3">
                    <div class="font-20">{{item.faultReason}}</div>
                    <div class="">{{item.faultTime}}</div>
                  </div>
                  <div class="h-4 w-100 mb-3 d-flex flex-column justify-content-around pl-3 pr-3 pt-1 pb-1">
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div>设备名称：</div>
                      </div>
                      <div>{{item.deviceName}}</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div>设备位置：</div>
                      </div>
                      <div>{{item.deviceLocation}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryOneListWorkingByNum,
    queryOneListWorkingByStatus,
    queryTwoListWorkingByNum,
    queryTwoListWorkingByStatus,
    queryThreeListWorkingByNum,
    queryThreeListWorkingByStatus,
    queryFourListWorkingByNum,
    queryFourListWorkingByStatus,
    queryFiveListWorkingByNum,
    queryFiveListWorkingByStatus,
    queryDeviceWorkingFaultList
  } from "@/api/dormOneBuildingOneFloor/operationMonitor"

  export default {
    components: {},
    data() {
      return {
        dlq_open: require('@/assets/img/dlq_open.png'),
        dlq_close: require('@/assets/img/dlq_close.png'),
        gz_success: require('@/assets/img/gz_success.png'),
        gz_danger: require('@/assets/img/gz_danger.png'),
        icon_A: require('@/assets/img/icon_A.png'),
        icon_B: require('@/assets/img/icon_B.png'),
        icon_C: require('@/assets/img/icon_C.png'),
        icon_V: require('@/assets/img/icon_V.png'),
        icon_V2: require('@/assets/img/icon_V2.png'),
        jlt: require('@/assets/img/jlt.png'),
        dp_44: require('@/assets/img/dp_44.png'),
        xyj_44: require('@/assets/img/xyj_44.png'),
        yjgyd_44: require('@/assets/img/yjgyd_44.png'),
        ysj_44: require('@/assets/img/ysj_44.png'),
        timeout: [],

        switchDataOne0: {},
        switchDataOne1: {},
        switchDataOne2: {},
        switchDataOne3: {},
        switchDataOne4: {},
        switchDataOne5: {},
        switchStatusOne: {
          socketColor: '1',
          socketColor2: '1',
        },
        switchStatusOneBgImg: [require('@/assets/img/gz_success.png'), require('@/assets/img/gz_success.png'),
          require('@/assets/img/gz_danger.png'), require('@/assets/img/gz_success.png'), require('@/assets/img/gz_warning.png'), require('@/assets/img/gz_danger2.png')],

        switchDataTwo0: {},
        switchDataTwo1: {},
        switchDataTwo2: {},
        switchDataTwo3: {},
        switchDataTwo4: {},
        switchDataTwo5: {},
        switchStatusTwo: {
          socketColor: '1',
          socketColor2: '1',
        },

        switchDataThree0: {},
        switchDataThree1: {},
        switchDataThree2: {},
        switchDataThree3: {},
        switchDataThree4: {},
        switchDataThree5: {},
        switchStatusThree: {
          socketColor: '1',
          socketColor2: '1',
        },

        twoCardData: [],
        twoCardStatus: [],
        twoCardTitle: ['东过道1', '东过道2', '西过道', '应急灯', '饮水机', '洗衣机'],
        twoCardBg: ["common_bg1", "common_bg1", "common_bg1", "common_bg2", "common_bg2", "common_bg2"],

        threeCardTitle: ['1101-1106室', '1107-1112室', '1114室', '1115室', '宿管间'],
        threeCardData: [],
        threeCardStatus: [],

        fourCardTitle: ['1101室', '1102室', '1103室', '1104室', '1105室', '1106室', '1107室', '1108室', '1109室', '1110室', '1111室', '1112室', '1114室', '1115室', '宿管间'],
        fourCardData: [],
        fourCardStatus: [],

        fiveCardData: [],
        fiveCardStatus: [],

        deviceGz: [],
        deviceGzObj: {},
      }
    },
    created() {
      this.queryOneListWorkingByNum()
      this.queryOneListWorkingByStatus()

      this.queryTwoListWorkingByNum()
      this.queryTwoListWorkingByStatus()

      this.queryThreeListWorkingByNum()
      this.queryThreeListWorkingByStatus()

      this.queryFourListWorkingByNum()
      this.queryFourListWorkingByStatus()

      this.queryFiveListWorkingByNum()
      this.queryFiveListWorkingByStatus()

      this.queryDeviceWorkingFaultList()
    },
    mounted() {
      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListWorkingByNum()

        _this.queryTwoListWorkingByNum()

        _this.queryThreeListWorkingByNum()

        _this.queryFourListWorkingByNum()

        _this.queryFiveListWorkingByNum()

        _this.queryDeviceWorkingFaultList()
      }, 30000);

      this.timeout[1] = setInterval(() => {
        _this.queryOneListWorkingByStatus()

        _this.queryTwoListWorkingByStatus()

        _this.queryThreeListWorkingByStatus()

        _this.queryFourListWorkingByStatus()

        _this.queryFiveListWorkingByStatus()
      }, 15000);

      this.infinitScroll("table_one")
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListWorkingByNum() {
        queryOneListWorkingByNum().then(res => {
          let tempData = res.object
          this.switchDataOne0 = tempData[0].deviceList[0]
          this.switchDataOne1 = tempData[0].deviceList[1]
          this.switchDataOne2 = tempData[0].deviceList[2]
          this.switchDataOne3 = tempData[0].deviceList[3]
          this.switchDataOne4 = tempData[0].deviceList[4]
          this.switchDataOne5 = tempData[0].deviceList[5]

          this.switchDataTwo0 = tempData[1].deviceList[0]
          this.switchDataTwo1 = tempData[1].deviceList[1]
          this.switchDataTwo2 = tempData[1].deviceList[2]
          this.switchDataTwo3 = tempData[1].deviceList[3]
          this.switchDataTwo4 = tempData[1].deviceList[4]
          this.switchDataTwo5 = tempData[1].deviceList[5]

          this.switchDataThree0 = tempData[2].deviceList[0]
          this.switchDataThree1 = tempData[2].deviceList[1]
          this.switchDataThree2 = tempData[2].deviceList[2]
          this.switchDataThree3 = tempData[2].deviceList[3]
          this.switchDataThree4 = tempData[2].deviceList[4]
          this.switchDataThree5 = tempData[2].deviceList[5]
        })
      },
      queryOneListWorkingByStatus() {
        queryOneListWorkingByStatus().then(res => {
          let tempData = res.object
          this.switchStatusOne = tempData[0]
          this.switchStatusTwo = tempData[1]
          this.switchStatusThree = tempData[2]
        })
      },

      queryTwoListWorkingByNum() {
        queryTwoListWorkingByNum().then(res => {
          let tempData = res.object || []

          this.twoCardData = tempData

          let yjd = tempData[3].deviceValue
          let ysj = tempData[4].deviceValue

          let yjd2 = this.$subtractAndAssign(yjd, ysj)
          this.$set(this.twoCardData[3], 'deviceValue', yjd2);
        })
      },
      queryTwoListWorkingByStatus() {
        queryTwoListWorkingByStatus().then(res => {
          let tempData = res.object
          this.twoCardStatus = tempData
        })
      },

      queryThreeListWorkingByNum() {
        queryThreeListWorkingByNum().then(res => {
          let tempData = res.object
          this.threeCardData = tempData
        })
      },
      queryThreeListWorkingByStatus() {
        queryThreeListWorkingByStatus().then(res => {
          let tempData = res.object || []
          let arr = []
          for (let i = 0; i < tempData.length; i++) {
            if (tempData[i].socketColor == '0') {
              arr.push('bg-index-info')
            } else if (tempData[i].socketColor == '1') {
              arr.push('bg-index-success')
            } else if (tempData[i].socketColor == '2') {
              arr.push('bg-index-danger')
            } else if (tempData[i].socketColor == '3') {
              arr.push('bg-index-blue')
            } else if (tempData[i].socketColor == '4') {
              arr.push('bg-index-warning')
            } else {
              arr.push('bg-index-red')
            }
          }
          this.threeCardStatus = arr
        })
      },

      queryFourListWorkingByNum() {
        queryFourListWorkingByNum().then(res => {
          let tempData = res.object
          this.fourCardData = tempData
        })
      },
      queryFourListWorkingByStatus() {
        queryFourListWorkingByStatus().then(res => {
          let tempData = res.object || []
          let arr = []
          for (let i = 0; i < tempData.length; i++) {
            if (tempData[i].socketColor == '0') {
              arr.push('bg-index-info')
            } else if (tempData[i].socketColor == '1') {
              arr.push('bg-index-success')
            } else if (tempData[i].socketColor == '2') {
              arr.push('bg-index-danger')
            } else if (tempData[i].socketColor == '3') {
              arr.push('bg-index-blue')
            } else if (tempData[i].socketColor == '4') {
              arr.push('bg-index-warning')
            } else {
              arr.push('bg-index-red')
            }
          }
          this.fourCardStatus = arr
        })
      },

      queryFiveListWorkingByNum() {
        queryFiveListWorkingByNum().then(res => {
          let tempData = res.object
          this.fiveCardData = tempData
        })
      },
      queryFiveListWorkingByStatus() {
        queryFiveListWorkingByStatus().then(res => {
          let tempData = res.object || []
          let arr = []
          for (let i = 0; i < tempData.length; i++) {
            if (tempData[i].socketColor == '0') {
              arr.push('bg-index-info')
            } else if (tempData[i].socketColor == '1') {
              arr.push('bg-index-success')
            } else if (tempData[i].socketColor == '2') {
              arr.push('bg-index-danger')
            } else if (tempData[i].socketColor == '3') {
              arr.push('bg-index-blue')
            } else if (tempData[i].socketColor == '4') {
              arr.push('bg-index-warning')
            } else {
              arr.push('bg-index-red')
            }
          }
          this.fiveCardStatus = arr
        })
      },

      async queryDeviceWorkingFaultList() {
        await queryDeviceWorkingFaultList().then(res => {
          let tempData = res.object || []
          if (tempData.length > 1) {
            this.deviceGzObj = tempData[0]
            this.deviceGz = tempData.slice(1, tempData.length)
          } else {
            this.deviceGz = tempData
          }
        })
      },

      infinitScroll(name) {
        const table = this.$refs[name]
        table.onmouseover = function () {
          clearInterval(t)
        }
        table.onmouseout = function () {
          start()
        }
        let t

        function start() {
          t = setInterval(() => {
            table.scrollTop += 1
            if (table.scrollHeight - (table.clientHeight + table.scrollTop) < 1) {
              table.scrollTop = 0
            }
          }, 30)
        }

        start()
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-67 {
    height: 67%;
  }

  .height-60 {
    height: 60%;
  }

  .height-48 {
    height: 47%;
  }

  .height-40 {
    height: 40%;
  }

  .height-30 {
    height: 30%;
  }

  .height-25 {
    height: 25%;
  }


  .width-80 {
    width: 80%;
  }

  .width-33 {
    width: 33%;
  }

  .width-30 {
    width: 30%;
  }

  .common_title {
    height: 10%;
  }

  .common_content {
    height: 90%;

    .common_content_radius {
      border-radius: 4px;
      background: rgba(10, 52, 61, 0.74);
      overflow: hidden;
    }

    .common_content_title {
      width: 60px;
    }

    .common_content_container {
      width: calc(100% - 60px);
    }

    .common_bg1 {
      background: #ffb822;
    }

    .common_bg2 {
      background: #07C160;
    }

    .common_bg3 {
      background: #38C4C4;
    }

    .common_bg4 {
      background: #868686;
    }
  }

  .border-danger-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #df547b inset;
  }

  .border-success-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(7, 193, 96, 0.83) inset;
  }

  .border-warning-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(254, 213, 47, 0.83) inset;
  }

  .border-primary-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(22, 208, 255, 0.50) inset;
  }

  .content_title {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .content_value {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 4px;
  }

  .clearLastMb:last-child {
    margin-bottom: 0 !important;
  }

  .clearLastMb2:nth-last-child(1), .clearLastMb2:nth-last-child(2), .clearLastMb2:nth-last-child(3) {
    margin-bottom: 0 !important;
  }

  .bg-index-success {
    background: #056E41;
    border-radius: 2px;
  }

  .bg-index-danger {
    background: #71384F;
    border-radius: 2px;
  }

  .bg-index-warning {
    background: #B3A12F;
    border-radius: 2px;
  }

  .bg-index-info {
    background: #7A7A7A;
    border-radius: 2px;
  }

  .bg-index-blue {
    background: #2C637A;
    border-radius: 2px;
  }

  .bg-index-red {
    background: #AF1F1F;
    cursor: pointer;
  }

  .border-danger {
    background: rgba(3, 24, 29, 0.34);
    border: 1px solid #f31e1e;
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #f31e1e inset;
  }

  .img_size_44 {
    width: 44px;
    height: 44px;
  }

  .img_size_31 {
    width: 31px;
    height: 31px;
  }

  .img_size_29 {
    width: 29px;
    height: 29px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>
